<template>
  <div class="mui-pages" style="background-color: #fff;">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.back()" href="javascript:void(0)"><img class="back-btn" src="../../../../static/images/back.png"></a>
        <div v-if="!editFlag" class="header-search flex-center">添加党务公开</div>
        <div v-if="editFlag" class="header-search flex-center">信息编辑</div>
        <div @click="addAffairs()" class="header-right-btn flex-center">提交</div>
      </div>
    </header>
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll record-member-lists">
          <ul class="mui-table-view meeting-editor-lists">
            <li class="mui-table-view-cell flex-between-center">
              <b><span class="mine-lists-money">·</span>标题：</b>
              <span class="mine-lists-content">
									<input class="setup-input" type="text" id="" placeholder="请输入标题" v-model="data.title" /></span>
            </li>
            <li class="mui-table-view-cell flex-between-center">
              <b><span class="mine-lists-money">·</span>发布人：</b>
              <span class="mine-lists-content">{{data.publisherName}}</span>
            </li>
            <li class="mui-table-view-cell flex-between-center" @click="showActive()">
              <b><span class="mine-lists-money">·</span>发布来源：</b>
              <span class="mine-lists-content">
											<input οnfοcus="this.blur();" class="setup-input" type="text" readonly v-model="data.sourceOfPublication" placeholder="请选择发布来源" /></span>
            </li>
            <li class="mui-table-view-cell">
              <b><span class="mine-lists-money">·</span>信息内容：</b>
              <textarea class="list-textarea" id="textarea" rows="5" placeholder="请输入信息内容" v-model="data.content"></textarea>
            </li>
          </ul>
          <div class="message-details">
            <p class="mine-lists-title">信息附件：</p>
          </div>
          <ul class="mui-content-padded flex-justify-start">
<!--            <li class="enclosure-upload" v-for="(data,index) in attachmentList" :key="data.fileId">-->
<!--              <img class="enclosure-upload-file" src="../../../../static/images/slidepic.jpg" />-->
<!--              <p class="mui-ellipsis">{{data.fileName}}</p>-->
<!--            </li>-->
            <cube-upload ref="upload"
                         action=""
                         v-model="files"
                         accept="*/*"
                         :simultaneous-uploads="1"
                         @files-added="uploadFile"
                         @file-removed="fileRemoved"
                         @input="onInput"
            />
          </ul>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import fileIcon from '../../../../static/images/up_document.png'
  export default {
    data () {
      return {
        fn: tools,
        data: {
          title: '',
          content: '',
          publisherName: '',
          sourceOfPublication: '',
          sourceOfPublicationId: '',
          attachment: ''
        },
        action: '',
        attachmentList: [],
        files: [],
        editFlag: false
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      addAffairs () {
        if (this.data.title === '') {
          return tools.tip('标题不能为空')
        }
        if (this.data.sourceOfPublication === '') {
          return tools.tip('请选择发布来源')
        }
        if (this.data.content === '') {
          return tools.tip('请输入信息内容')
        }
        if (this.data.sourceOfPublicationId === 'branch') {
          this.data.sourceOfPublication = '支部'
        } else if (this.data.sourceOfPublicationId === 'partyaffairsoffice') {
          this.data.sourceOfPublication = '党务办'
        }
        this.data.attachment = JSON.stringify(this.attachmentList)
        let partyAffairsFormModel = this.data
        let itmpObj = this.$store.state.editAffairsData
        if (itmpObj && itmpObj !== null) {
          partyAffairsFormModel.id = itmpObj.id
          loginService.eidtPartyAffairsInfo(partyAffairsFormModel).then((res) => {
            if (res.code !== 200) {
              return tools.tip(res.message)
            } else {
              tools.tip('修改成功')
              tools.back()
            }
          })
        } else {
          loginService.addPartyAffairs(partyAffairsFormModel).then((res) => {
            if (res.code !== 200) {
              return tools.tip(res.message)
            } else {
              tools.tip('添加成功')
              tools.back()
            }
          })
        }
      },
      loadData () {
        this.action = api.updFiles
        let userInfo = this.$store.state.userInfo || {}
        console.log(userInfo)
        this.data.publisherName = userInfo.fullname
        let itmpObj = this.$store.state.editAffairsData
        if (itmpObj !== null) {
          this.data.title = itmpObj.title
          this.data.content = itmpObj.content
          this.data.publisherName = itmpObj.publisherName
          this.data.sourceOfPublication = itmpObj.sourceOfPublication
          this.data.sourceOfPublicationId = itmpObj.sourceOfPublicationId
          this.attachmentList = itmpObj.attachmentList
          this.editFlag = true
          for (let key in this.attachmentList) {
            let v = this.attachmentList[key]
            let url = api.downLoadFile + v.fileId
            let name = v.fileName
            let file = {"url": url, "name": v.fileName, "size": v.totalBytes}
            if (!tools.isImage(file.name)) {
              file.url = fileIcon
            }
            this.files.push(file)
          }
        }
      },
      filesAdded (files) {
        let hasIgnore = false
        const maxSize = 1 * 1024 * 1024 // 1M
        for (let k in files) {
          const file = files[k]
          if (file.size > maxSize) {
            file.ignore = true
            hasIgnore = true
          }
        }
        hasIgnore && this.$createToast({
          type: 'warn',
          time: 1000,
          txt: 'You selected >1M files'
        }).show()
      },
      uploadFile (file) {
        let uploadFile = file[0]
        let formData = new FormData()
        formData.append('file', uploadFile)
        loginService.updFiles(formData).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }

          this.attachmentList.push({'fileId': res.data[0].fileId, 'fileName': uploadFile.name, 'totalBytes': res.data[0].totalBytes})
        })
      },
      // 选择会议范围
      showActive () {
        let dwb = [
          {
            scope: 'branch',
            content: '支部'
          },
          {
            scope: 'partyaffairsoffice',
            content: '党务办'
          }
        ]
        let noDwb = [
          {
            scope: 'branch',
            content: '支部'
          }
        ]
        let result
        let roleType = this.$localStorage.get('roleType')
        if (this.fn.hasDwbRoleType(roleType)) {
          result = dwb
        } else {
          result = noDwb
        }
        this.$createActionSheet({
          title: '发布来源',
          active: 0,
          data: result,
          onSelect: (item, index) => {
            this.data.sourceOfPublication = item.content
            this.data.sourceOfPublicationId = item.scope
          },
          onCancel: () => {
          }
        }).show()
      },
      // 删除文件
      fileRemoved (file) {
        let fileName
        let size
        if (file.name && file.size) {
          fileName = file.name
          size = file.size
        } else {
          fileName = file.file.name
          size = file.file.size
        }
        this.attachmentList.some((v, i) => {
          if (v.fileName === fileName && v.totalBytes === size) {
            this.attachmentList.splice(i, 1)
            return false
          }
        })
      },
      onInput (file) {
        this.$refs.upload.files.map((v) => {
          if (!tools.isImage(v.name)) {
            v.url = fileIcon
          }
          return v
        })
      }
    }
  }
</script>

<style scoped>

</style>
